<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input class="phone" id="phoneNum" maxlength="20" type="text" placeholder="建议使用常用手机">
<a id="sendCode">发送验证码</a>

<script>

    $(function () {
        $("#sendCode").click(function () {
            //倒计时效果
            if (!$(this).hasClass("disabled")) {
                //给指定手机发送验证码
                $.get("/sms/sendCode?phone=" + $("#phoneNum").val(), function (data) {
                    if (data.code != 0) {
                        alert(data.msg);
                    }
                });
                timeoutChangeStyle();
            }
        })
    })
    var num = 60;

    function timeoutChangeStyle() {
        // 将a标签禁用，防止用户多次点击
        $("#sendCode").attr("class", "disabled")
        if (num == 0) {
            $("#sendCode").text("发送验证码");
            num = 60;
            // 将a标签非禁用
            $("#sendCode").attr("class", "")
        } else {
            var str = num + "s 后再次发送验证码";
            $("#sendCode").text(str);
            setTimeout("timeoutChangeStyle()", 1000);
        }
        num--;
    }
</script>
</body>
</html>
